<!DOCTYPE html>
<html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
  <head>
    <script src="../../platform-dev/platform.js"></script>
    <link rel="import" href="../../polymer-dev/polymer.html">

    <script src="data.js"></script>

  </head>
  <body>

<polymer-element name="test-me">
  <template>
    <style>
    @host {
      * { display: block; }
    }
    .file-title {
      display: flex;
      padding: 5px;
      background-color: #f0f0f8;
    }
    .file-title .actions {
      font-size: 80%;
    }
    .flag {
    }
    .name {
      flex: 1;
    }
    #diff {
      overflow-x: hidden;
    }
    .group {
      display: flex;
    }
    #diff:not(.unified) .left,
    #diff:not(.unified) .right {
      flex-shrink: 0;
      width: 50%;
    }
    #diff:not(.unified) .left  .add,
    #diff:not(.unified) .right .remove {
      display: none;
    }
    #diff.unified .left {
      flex: 1;
    }
    #diff.unified .right {
      display: none;
    }
    .line,
    .comment {
      display: flex;
      font-family: monospace;
    }
    .before,
    .after,
    .text {
      white-space: pre-wrap;
      word-break: break-all;
      padding: 2px;
      flex: 1;
    }
    .line.add .text {
      background-color: #dfd;
    }
    .line.remove .text {
      background-color: #fdd;
    }
    .header {
      color: #999;
      background-color: #f8f8ff;
    }
    .comment .text {
      background-color: #ffd;
    }
    .comment .draft,
    .comment .text {
      flex: 1;
    }
    .comment .text {
      border: 1px inset;
      padding: 5px;
    }
    .comment .text .author {
      font-style: italic;
    }
    .comment .draft {
      display: flex;
      flex-direction: column;
    }
    .comment .draft textarea {
      display: block;
      margin: 0;
    }
    .file-diff {
      border: 1px solid #ccc;
      margin: 0 0 10px;
    }
    .polymer-ui-collapsible-header {
      cursor: pointer;
    }
    .before,
    .after {
      width: 3em;
      flex: none;
      align-self: flex-start;
    }
    .line .before,
    .line .after {
      text-align: right;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      background-color: #FCFCEC;
    }
    .select-start .before,
    .select-start .after,
    .select-end .before,
    .select-end .after {
      background-color: #69F;
      border-bottom: 1px solid #69F;
      border-right: 1px solid #69F;
    }
    #diff:not(.unified) .left  .after,
    #diff:not(.unified) .right .before {
      display: none;
    }
    #diff.unified .right .after,
    #diff.unified .right .before {
      display: none;
    }
    </style>
    <div id="diff">
      <template if="{{ data &amp;&amp; hasBeenActivated }}">
        <template repeat="{{ file in data }}">
          <div class="file-diff">
            <div class="file-title polymer-ui-collapsible-header">
              <div class="name">{{ file.name }}</div>
              <div class="actions">
                <a href="{{ viewurl }}/{{ file.name }}?annotate=HEAD" target="_blank" on-tap="stopPropagation">Annotate</a>
                <a href="{{ viewurl }}/{{ file.name }}" target="_blank" on-tap="stopPropagation">View file</a>
              </div>
            </div>
            <div class="content" on-tap="onContentTap">
              <template if="{{ file.isImage }}">
                <div class="group image">
                  <!-- FIXME: Add UI to show which is before and which is after and to handle add/removes of files. -->
                  <div class="left">
                    <div class="line remove">
                      <img src="https://codereview.chromium.org/{{ issue }}/image/{{ metadata.patchset }}/{{ file.metadata.id }}/0">
                    </div>
                    <div class="line add">
                      <img src="https://codereview.chromium.org/{{ issue }}/image/{{ metadata.patchset }}/{{ file.metadata.id }}/1">
                    </div>
                  </div>
                  <div class="right">
                    <div class="line add">
                      <img src="https://codereview.chromium.org/{{ issue }}/image/{{ metadata.patchset }}/{{ file.metadata.id }}/1">
                    </div>
                  </div>
                </div>
              </template>
              <template if="{{ !file.isImage }}" repeat="{{ group in file.groups }}"
                ><div class="group"
                  ><div class="left"
                    ><template repeat="{{ line in group }}"
                      ><div class="line {{ line.type }}"
                        ><div class="line-number before">{{ line.beforeNumber ? line.beforeNumber : '&nbsp;' }}</div
                        ><div class="line-number after">{{ line.afterNumber ? line.afterNumber : '&nbsp;' }}</div
                        ><div class="text">{{ line.text }}</div
                        ><rietveld-flag class="flag" value="{{ line.hasLeftDraft }}"></rietveld-flag
                      ></div
                      ><template repeat="{{ message in line.messages }}"
                        ><div class="comment {{ message.left ? 'remove' : 'add' }}"
                          ><div class="before">&nbsp;</div
                          ><div class="after">&nbsp;</div
                          ><div class="text"><div class="author">{{ message.author }}:</div>{{ message.text }}</div
                        ></div
                      ></template
                      ><template if="{{ line.hasLeftDraft }}"
                        ><div class="comment remove"
                          ><div class="before">&nbsp;</div
                          ><div class="after">&nbsp;</div
                          ><div class="draft"
                            ><textarea value="{{ line.leftDraft }}"></textarea
                            ><div
                              ><button>Save</button
                              ><button>Discard</button
                            ></div
                          ></div
                        ></div
                      ></template
                      ><template if="{{ line.hasRightDraft }}"
                        ><div class="comment add"
                          ><div class="before">&nbsp;</div
                          ><div class="after">&nbsp;</div
                          ><div class="draft"
                            ><textarea value="{{ line.rightDraft }}"></textarea
                            ><div
                              ><button>Save</button
                              ><button>Discard</button
                            ></div
                          ></div
                        ></div
                      ></template
                    ></template
                  ></div
                  ><div class="right"
                    ><template repeat="{{ line in group }}"
                      ><div class="line {{ line.type }}"
                        ><div class="line-number before">{{ line.beforeNumber ? line.beforeNumber : '&nbsp;' }}</div
                        ><div class="line-number after">{{ line.afterNumber ? line.afterNumber : '&nbsp;' }}</div
                        ><div class="text">{{ line.text }}</div
                        ><rietveld-flag class="flag" value="{{ line.hasRightDraft }}"></rietveld-flag
                      ></div
                      ><template repeat="{{ message in line.messages }}"
                        ><div class="comment {{ message.left ? 'remove' : 'add' }}"
                          ><div class="before">&nbsp;</div
                          ><div class="after">&nbsp;</div
                          ><div class="text"><div class="author">{{ message.author }}:</div>{{ message.text }}</div
                        ></div
                      ></template
                      ><template if="{{ line.hasRightDraft }}"
                        ><div class="comment"
                          ><div class="before">&nbsp;</div
                          ><div class="after">&nbsp;</div
                          ><div class="draft"
                            ><textarea value="{{ line.rightDraft }}"></textarea
                            ><div
                              ><button>Save</button
                              ><button>Discard</button
                            ></div
                          ></div
                        ></div
                      ></template
                    ></template
                  ></div
                ></div
              ></template>
            </div>
          </div>
        </template>
      </template>
    </div>
  </template>
  <script>
  (function() {
  var div = document.createElement('div');

  Polymer('test-me', {
    diff: null,
    data: null,
    diffmode: '',
    viewurl: '',
    active: false,
    hasBeenActivated: false,

    ready: function() {
      console.time('mdv');
      console.profile('mdv');
    	this.data = window.data;
      this.hasBeenActivated = true;
      Platform.performMicrotaskCheckpoint();

      var observer = new MutationObserver(function() {
        console.profileEnd('mdv');
        console.timeEnd('mdv');
      });
      observer.observe(div, { attributes: true });
      div.setAttribute('foo', 'bar');
    }
  });

  })();
  </script>
</polymer-element>

    <test-me></test-me>
  </body>
</html>

